<template>
    <div class="cinema-search-input-component">
        <div class="top">
            <div class="left">
                <SelectCityBtn :style="{ background: '#fff', flex: 'none' }"></SelectCityBtn>
            </div>
            <div class="input">
                <nut-searchbar placeholder="搜索影院" :clearable="true" v-model="searchValue" @clear="clear" @search="search"
                    safe-area-inset-bottom>
                    <template #leftin>
                        <Search2 size="12" />
                    </template>
                </nut-searchbar>
            </div>
            <div @click="handleClickAsk" style="margin-left: 10px;">
                <IconFont name="ask" color="#5232B7"></IconFont>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref, watch } from "vue";
import Taro from '@tarojs/taro';
import SelectCityBtn from "../select-city/index";
import { IconFont } from '@nutui/icons-vue-taro';

import { Search2 } from '@nutui/icons-vue-taro';
const searchValue = ref("");
const emit = defineEmits(["onSearch", "onClear"]);
const search = () => {
    emit("onSearch", searchValue.value);
};
const clear = () => {
    emit("onClear");
};
watch(searchValue, (newValue) => {
    if (!newValue) {
        emit("onClear");

    }


})
//跳转问题反馈页面
const handleClickAsk = () => {
    Taro.navigateTo({
        url: "/pages/feed-back/index"
    })

}

</script>
<style lang="scss">
.cinema-search-input-component {
    display: flex;
    flex-direction: column;
    background: #fff;

    .top {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 0.2rem 0.5rem 0 0.5rem;

        .left {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            display: -webkit-box;
            /* autoprefixer: ignore next */
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            text-overflow: ellipsis;
            overflow: hidden;
        }

        .input {
            flex: 4;
            background: #5232B7;
            margin-left: 25px;

            .nut-searchbar {
                padding: 0;
                font-size: 10px !important;

                .nut-searchbar__search-input {
                    background: #f6f8f9;
                    box-shadow: unset !important;
                    position: relative;

                    .nut-searchbar__input-inner-icon {
                        position: absolute;
                        right: 0;
                    }
                }
            }
        }
    }
}
</style>
